<template>
  <div>
    <el-card>
      <el-form
        :model="loginPasswordform"
        :rules="loginPasswordRule"
        size="large"
        ref="loginPasswordRef"
      >
        <el-form-item prop="username">
          <el-input
            v-model.trim="loginPasswordform.username"
            placeholder="请输入账号"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            type="password"
            placeholder="请输入密码"
            v-model.trim="loginPasswordform.password"
            prefix-icon="Lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            @click="loginPasswordSubmitCheck()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 验证码 -->
    <Verify
      @success="successVerify"
      :mode="'pop'"
      :captcha-type="'blockPuzzle'"
      :imgSize="{ width: '400px', height: '200px' }"
      ref="verify"
    ></Verify>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import Verify from "./components/verifition/Verify.vue";

const loginPasswordRef = ref();
const loginPasswordform = reactive({
  username: "",
  password: "",
  captchaVerification: "",
});
const loginPasswordRule = reactive({
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});
// 图片验证码
const verify = ref();
// 密码登录前校验
const loginPasswordSubmitCheck = () => {
  if (!loginPasswordRef) return;
  loginPasswordRef.value.validate((valid) => {
    if (valid) {
      verify.value.show();
    } else {
      return false;
    }
  });
};
// 验证码校验通过
const successVerify = (param) => {
  ElMessage.success("图片验证码校验通过");
  // 发起登录请求
};
</script>
<style scoped></style>
